<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网站统计</title>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-row :gutter="20">
        <el-col :span="6">
            <div class="grid-content bg-purple">
                <p style="margin-left: 30px;"><span>文章总量</span></p>
                <p style="margin-left: 30px;"><span id="total_number_of_articles">2023</span></p>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content bg-purple">
                <p style="margin-left: 30px;"><span>评论数</span></p>
                <p style="margin-left: 30px;"><span id="number_of_comments">2023</span></p>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content bg-purple">
                <p style="margin-left: 30px;"><span>阅读量</span></p>
                <p style="margin-left: 30px;"><span id="reading_quantity">2023</span></p>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content bg-purple">
                <p style="margin-left: 30px;"><span>转发数</span></p>
                <p style="margin-left: 30px;"><span id="number_of_forwarding">2023</span></p>
            </div>
        </el-col>
    </el-row>
    <template>
        <div style="margin: 50px 0 0 50px;float: left;">
            <el-radio-group v-model="radio_yonhu">
                <el-radio-button label="文章数"></el-radio-button>
                <el-radio-button label="阅读量"></el-radio-button>
                <el-radio-button label="评论数"></el-radio-button>
            </el-radio-group>
        </div>
    </template>
    <template>
        <div class="block" style="margin: 50px 35px 0 0;float: right;">

            <el-date-picker
                    v-model="value_kDate"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="2023-06-01"
                    end-placeholder="2023-06-30"
                    format="yyyy年MM月dd日"
                    value-format="yyyy-MM-dd">
            </el-date-picker>
            <button style="width: 100px;height: 30px" id="queding">确定</button>
        </div>
    </template>
    <div id="main2" style="width:90%;height:500px;margin-left:5px"></div>
</div>
</body>
<link href="../files/网站统计/website_statistics.css">
<style>
    .bg-purple {
        background: #eeeeee;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 200px;
        min-width: 200px;
    }
</style>
<script src="../files/statistics/content_statistics.js"></script>
<script src="../data/axios-0.18.0.js"></script>
<script src="../data/jquery.min.js"></script>
<script src="https://echarts.baidu.com/build/dist/echarts.js"></script>
<script>
    var Main = {
        data() {
            return {
                radio_yonhu: '文章数',
                value_kDate: ''
            };
        },
        created() {
            this.init();
        },
        methods:{
            init(){
                articlesNumber();
            }
        }
    }
    var Ctor = Vue.extend(Main)

    let $mount = new Ctor().$mount("#app");

    $("#queding").click(function () {
        if($mount.radio_yonhu == '文章数'){
            articlesNumberTime($mount.value_kDate[0], $mount.value_kDate[1]);
        }
        if($mount.radio_yonhu == '阅读量'){
            readingQuantityTime($mount.value_kDate[0], $mount.value_kDate[1])
        }
        if($mount.radio_yonhu == '评论数'){
            commentsNumberTime($mount.value_kDate[0], $mount.value_kDate[1])
        }
    });


</script>
</html>
